<template>
	<view>
		<view class="CM-top"></view>
		<view class="topInfo">
			<view class="left">
				<view>当前定位：</view>
				<view>{{ position }}</view>
			</view>
			<view class="right" @click="getCurrentLocation()">
				<image src="/static/index/刷新.png" mode=""></image>
				重新定位
			</view>
		</view>

		<view class="cityPart">
			<view class="hotCity">
				<view class="hotText">热门城市</view>
				<view class="city">
					<view v-for="city in hotCities" :key="city.name"
						@click="getCurrentLocation(city.latitude, city.longitude)" class="cityItem">
						{{ city.name }}
					</view>
				</view>
			</view>

			<view class="allCity">
				<view class="allText">全部城市</view>
				<view class="city" v-for="(cities, letter) in groupedCities" :key="letter">
					<view class="cityLetter">{{ letter }}</view>
					<view v-for="city in cities" :key="city.fullname"
						@click="getCurrentLocation(city.location.lat, city.location.lng)" class="cityItem">
						{{ city.fullname }}
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	// 引入SDK核心类
	var QQMapWX = require('@/js/qqmap-wx-jssdk.min.js');

	// 实例化API核心类
	var qqmapsdk = new QQMapWX({
		key: 'TW2BZ-QHD3O-T77WO-SO4NT-LQUMS-ZMF62' // 必填
	});
	export default {
		data() {
			return {
				position: "未定位",
				latitude: null,
				longitude: null,
				hotCities: [
					// 热门城市数据
					{
						name: "郑州",
						latitude: 34.7579,
						longitude: 113.6654
					},
					{
						name: "北京",
						latitude: 39.9042,
						longitude: 116.4074
					},
					{
						name: "杭州",
						latitude: 30.2741,
						longitude: 120.1551
					},
					{
						name: "上海",
						latitude: 31.2304,
						longitude: 121.4737
					},
					{
						name: "广州",
						latitude: 23.1291,
						longitude: 113.2644
					},
					{
						name: "深圳",
						latitude: 22.5431,
						longitude: 114.0579
					},
					{
						name: "成都",
						latitude: 30.5728,
						longitude: 104.0668
					},
					{
						name: "重庆",
						latitude: 29.5630,
						longitude: 106.5516
					},
					{
						name: "天津",
						latitude: 39.3434,
						longitude: 117.3616
					},
					{
						name: "南京",
						latitude: 32.0603,
						longitude: 118.7969
					},
					{
						name: "苏州",
						latitude: 31.2989,
						longitude: 120.5853
					},
					{
						name: "武汉",
						latitude: 30.5928,
						longitude: 114.3055
					}
				],
				groupedCities: {} // 存储分组后的城市数据
			}
		},
		onReady() {
			this.checkStoredPosition();
		},
		methods: {
			checkStoredPosition() {
				const storedPosition = uni.getStorageSync('currentPosition');
				const storedLatitude = uni.getStorageSync('latitude');
				const storedLongitude = uni.getStorageSync('longitude');

				if (storedPosition) {
					this.position = storedPosition;
					this.latitude = parseFloat(storedLatitude);
					this.longitude = parseFloat(storedLongitude);
				} else {
					this.getMyPosition();
				}
			},
			getMyPosition() {
				const that = this;
				uni.getLocation({
					success(resp) {
						that.latitude = resp.latitude;
						that.longitude = resp.longitude;
						that.getCurrentLocation();
					}
				});
			},
			getCurrentLocation(lat = this.latitude, lng = this.longitude) {
				var _this = this;
				qqmapsdk.reverseGeocoder({
					location: `${lat},${lng}`,
					success: (res) => {
						this.position = res.result.address;

						// 存储位置信息到小程序的存储
						uni.setStorageSync('currentPosition', this.position);
						uni.setStorageSync('latitude', lat);
						uni.setStorageSync('longitude', lng);
					},
					fail: function(error) {
						console.error(error);
					}
				});
			},
			groupCities(cities) {
				const grouped = {};
				cities.forEach(city => {
					const firstPinyinLetter = city.pinyin[0].charAt(0).toUpperCase(); // 获取拼音首字母
					if (!grouped[firstPinyinLetter]) {
						grouped[firstPinyinLetter] = [];
					}
					grouped[firstPinyinLetter].push(city);
				});
				// 对分组后的城市按字母顺序排序
				this.groupedCities = Object.keys(grouped).sort().reduce((acc, letter) => {
					acc[letter] = grouped[letter].sort((a, b) => a.fullname.localeCompare(b.fullname)); // 按城市名称排序
					return acc;
				}, {});
			}
		},
		onShow: function() {
			var _this = this;
			qqmapsdk.getCityList({
				success: function(res) {
					const cityData = res.result[1]; // 获取城市数据
					const citiesOnly = cityData.filter(city => !city.fullname.includes('区')); // 只保留市的信息
					console.log('城市数据：', citiesOnly); // 输出市的数据
					// 紧接着将城市信息进行分组
					_this.groupCities(citiesOnly); 
				},
				fail: function(error) {
					console.error(error);
				}
			});
		}
	}
</script>

<style>
	/* 样式保持不变 */
	.CM-top {
		width: 100%;
		height: 360rpx;
		background-color: #1E90FF;
		position: fixed;
	}

	.topInfo {
		width: 90%;
		height: 100rpx;
		position: fixed;
		padding: 100rpx 5% 30rpx;
		left: 0;
		right: 0;
		margin: auto;
		display: flex;
		justify-content: space-between;
		z-index: 3;
		background-color: #1E90FF;
	}

	.topInfo .left {
		width:65%;
		height: auto;
		margin-left: 30rpx;
		overflow-wrap: break-word;
	
	}

	.topInfo .left>view:nth-child(1) {
		color: white;
		font-size: 16px;
	}

	.topInfo .left>view:nth-child(2) {
		padding-top: 20rpx;
		color: white;
		font-size: 14px;
		word-wrap: break-word;
	}

	.topInfo .right {
		width: 25%;
		height: 100rpx;
		color: white;
		font-size: 11px;
		display: flex;
		align-items: center;
		padding-top: 20rpx;
	}

	.topInfo .right image {
		display: block;
		width: 50rpx;
		height: 50rpx;
	}

	.cityPart {
		width: 90%;
		height: auto;
		position: absolute;
		top: 200rpx;
		left: 0;
		right: 0;
		margin: 35rpx;
		border-radius: 35rpx;
		background-color: #F5F5F5;
		z-index: 2;
	}

	.hotCity {
		width: 100%;
		height: auto;
		border-radius: 35rpx;
		background-color: white;
		margin: 0 auto;
	}

	.hotCity .hotText {
		width: 90%;
		height: 140rpx;
		margin: 0 auto;
		font-size: 16px;
		line-height: 140rpx;
		border-bottom: 10rpx solid #F5F5F5;
	}

	.hotCity .city {
		width: 90%;
		height: 400rpx;
		background-color: white;
		margin: 0 auto;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		align-items: center;
		padding: 10rpx 0;
	}

	.hotCity .city view {
		width: 30%;
		height: 30rpx;
		border-radius: 45rpx;
		background-color: #F5F5F5;
		text-align: center;
		line-height: 30rpx;
		font-size: 11px;
		color: gray;
	}

	.allCity {
		width: 100%;
		height: auto;
		border-radius: 35rpx;
		background-color: white;
		margin: 30rpx auto;
	}

	.allCity .allText {
		width: 90%;
		height: 100rpx;
		margin: 0 auto;
		font-size: 16px;
		line-height: 100rpx;
		border-bottom: 10rpx solid #F5F5F5;
	}

	.allCity .city {
		width: 90%;
		height: auto;
		margin: 0 auto;
	}

	.cityLetter {
		font-size: 16px;
		font-weight: bold;
		margin: 10rpx 0;
	}

	.cityItem {
		margin-bottom: 10rpx;
		/* 增加下方间距 */
		border-bottom: 1px solid #F5F5F5;
		/* 浅灰色下边框 */
		padding: 20rpx 0;
		/* 增加上下内边距 */
	}
</style>